<template>
  <div>
    <div class="main">
      <div class="sutitle">
        <div class="sutitle-name">
          <img src="../../../../static/home/article.png" alt="" width="16px" height="16px" />
          <span>最新文章</span>
        </div>
        <span class="more">
          <router-link to='readclass'>更多</router-link>
          <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
        </span>
      </div>
      <!-- 阅读列表-->
      <div class="home-main" v-for="(item,index) in readList" :key="index">
        <div class="read-box" @click="goToReadContent(item)">
          <span class="home-main-img">
            <img :src="item.cover" onerror="this.src='../../../../static/citry.png'" alt="" />
          </span>
          <p v-text="item.mainTitle">什么理由让你死心塌地的留在这座城市？</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";
export default {
  props: ["navid"],
  data() {
    return {
      readList: [],
      items: [
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        }
      ]
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.getRead();
  },
  methods: {
    goToReadContent(data){
      sessionStorage.setItem("readdata",JSON.stringify(data))
      this.$router.push({name:'readcontent'})
      // readdata
    },
    bookstoragelink() {
      this.$router.push({
        path: "/bookstorage"
      });
    },
    getRead() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getNewColumResByColumnId",
        params: {
          inParam: {
            sysCode: "FH_PUBOPE",
            time: this.datevalue,
            orgId: 25,
            accId: 26,
            terminalType: 1,
            columnId: this.navid,
            resCount: 10
          }
        }
      })
        .then(response => {
          this.readList = response.data.data;
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
.home-swipe {
  width: 100%;
  height: 142px;
  /*background: skyblue;*/
}

.main .sutitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}
.home-main-img{
  width: 115px;
  height: 80px;
  margin-left: 10px;
}
.main .sutitle .sutitle-name {
  /*background-color: coral;*/
  flex-grow: 10;
  -webkit-flex-grow: 10;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .sutitle .sutitle-name > span {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.main .sutitle .more {
  /*background: #e60012;*/
  font-size: 13px;
  color: #b6b6b6;
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.main .sutitle .more > a {
  color: #a1a1a1;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 14px;
}

.main .read-box {
  width: 95%;
  height: 80px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 5px;
}

.main .read-box img {
  font-size: 15px;
  width: 115px;
  height: 100%;
}

.main .read-box p {
  margin-left: 22px;
  padding-right: 16px;
  color: #252525;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>